<template>
  <mavon-editor
    class="md"
    :value="content"
    :subfield="prop.subfield"
    :default-open="prop.defaultOpen"
    :toolbars-flag="prop.toolbarsFlag"
    :editable="prop.editable"
    :scroll-style="prop.scrollStyle"
    :box-shadow="prop.boxShadow"
  />
</template>

<script>

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  components: { mavonEditor },
  props: {
    toolbars: {
      type: Object,
      default: () => ({
        bold: {
          type: Boolean,
          default: true // 粗体
        },
        italic: {
          type: Boolean,
          default: true // 斜体
        },
        header: {
          type: Boolean,
          default: true // 标题
        },
        underline: {
          type: Boolean,
          default: true // 下划线
        },
        mark: {
          type: Boolean,
          default: true // 标记
        },
        superscript: {
          type: Boolean,
          default: true // 上角标
        },
        quote: {
          type: Boolean,
          default: true // 引用
        },
        ol: {
          type: Boolean,
          default: true // 有序列表
        },
        link: {
          type: Boolean,
          default: true // 链接
        },
        imagelink: {
          type: Boolean,
          default: true // 图片链接
        },
        help: {
          type: Boolean,
          default: true // 帮助
        },
        code: {
          type: Boolean,
          default: true // code
        },
        subfield: {
          type: Boolean,
          default: true // 是否需要分栏
        },
        fullscreen: {
          type: Boolean,
          default: true // 全屏编辑
        },
        readmodel: {
          type: Boolean,
          default: true // 沉浸式阅读
        },
        undo: {
          type: Boolean,
          default: true // 上一步
        },
        trash: {
          type: Boolean,
          default: true // 清空
        },
        save: {
          type: Boolean,
          default: true // 保存（触发events中的save事件）
        },
        navigation: {
          type: Boolean,
          default: true // 导航目录
        }
      })
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>
